<template>
	<div class="flex-col">
		<my-box class="f1 h0" title="Top5顶板应力趋势监测" :right="false">
			<my-echarts :options="options" style="margin-top: -41px; height: calc(100% + 41px)"></my-echarts>
		</my-box>
		<div class="flex f1 h0 m-y-10">
			<my-box class="f1 w0" title="302胶带钻孔"> <my-echarts :options="options1"></my-echarts> </my-box>
			<my-box class="f1 w0 m-x-10" title="403胶带顺槽钻孔"> <my-echarts :options="options2"></my-echarts> </my-box>
			<my-box class="f1 w0" title="403回风顺槽钻孔"> <my-echarts :options="options3"></my-echarts> </my-box>
		</div>
		<div class="flex f1 h0">
			<my-box class="f1 w0" title="五盘区回风顺槽钻孔"> <my-echarts :options="options4"></my-echarts> </my-box>
			<my-box class="f1 w0 m-x-10" title="302回风钻孔"> <my-echarts :options="options5"></my-echarts> </my-box>
			<my-box class="f1 w0" title="306胶带顺槽钻孔"> <my-echarts :options="options6"></my-echarts> </my-box>
		</div>
	</div>
</template>

<script setup>
// Top5顶板应力趋势监测
let options = computed(() => {
	let seriesData = [],
		data = [1, 2, 3, 4, 5]

	data.forEach((item) => {
		seriesData.push({
			name: `测点${item}`,
			type: 'line',
			symbol: 'circle',
			symbolSize: 8, //圆大小
			data: [8.0, 23.2, 25.6, 76.7, 135.6, 162.2].sort(() => 0.5 - Math.random())
		})
	})

	return merge({}, optionsData, {
		grid: {
			top: 50,
			left: 10,
			right: 10,
			bottom: 0,
			containLabel: true
		},
		yAxis: [{ name: '' }],
		legend: {
			orient: 'horizontal',
			top: 0,
			right: 0,
			itemWidth: 20,
			itemHeight: 8,
			icon: 'circle',
			itemGap: 17,
			align: 'left',
			textStyle: {
				color: '#fff',
				fontSize: 14,
				fontFamily: 'AlibabaPuHuiTi-Medium'
			}
		},
		series: seriesData
	})
})

const optionsData = {
	grid: {
		top: 30,
		left: '1%',
		right: '3%',
		bottom: '2%',
		containLabel: true
	},
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'line'
		},
		backgroundColor: 'rgba(3, 15, 39, 0.8)',
		borderColor: 'rgba(76, 107, 209, 0.5)',
		extraCssText: 'box-shadow: inset 0px 0px 8px 0px rgba(52, 104, 216, 0.6)',
		textStyle: {
			color: 'rgba(255, 255, 255, 1)'
		}
	},
	xAxis: {
		type: 'category',
		boundaryGap: true,
		axisPointer: {
			handle: {
				show: false
			}
		},
		axisLine: {
			show: true,
			lineStyle: {
				width: 1,
				color: '#747B88'
			}
		},
		axisTick: {
			show: false
		},
		axisLabel: {
			fontSize: 12,
			color: '#fff',
			interval: 'auto'
		},
		data: ['03/18', '03/19', '03/20', '03/21', '03/22', '03/23']
	},
	yAxis: [
		{
			name: 'Mpa',
			type: 'value',
			splitLine: {
				show: false
			},
			axisLabel: {
				fontSize: 12,
				color: '#fff',
				interval: 'auto'
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: 'rgba(224,230,241,0.2)',
					type: 'dashed'
				}
			},
			axisTick: {
				show: false
			}
		}
	]
}
// 302胶带钻孔
let options1 = computed(() => {
	let seriesData = [
		{
			type: 'bar',
			barWidth: 15,
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 1,
						y: 1,
						x2: 0,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: '#1c82cf' // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#01326b' // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					},
					barBorderRadius: [90, 90, 0, 0]
				}
			},
			data: [8.0, 23.2, 25.6, 76.7, 135.6, 162.2]
		}
	]
	return merge({}, optionsData, { series: seriesData })
})
// 403胶带顺槽钻孔
let options2 = computed(() => {
	let seriesData = [
		{
			type: 'bar',
			barWidth: 15,
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 1,
						y: 1,
						x2: 0,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: '#1c82cf' // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#01326b' // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					},
					barBorderRadius: [90, 90, 0, 0]
				}
			},
			data: [8.0, 23.2, 25.6, 76.7, 135.6, 162.2]
		}
	]
	return merge({}, optionsData, { series: seriesData })
})
// 403回风顺槽钻孔
let options3 = computed(() => {
	let seriesData = [
		{
			type: 'bar',
			barWidth: 15,
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 1,
						y: 1,
						x2: 0,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: '#1c82cf' // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#01326b' // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					},
					barBorderRadius: [90, 90, 0, 0]
				}
			},
			data: [8.0, 23.2, 25.6, 76.7, 135.6, 162.2]
		}
	]
	return merge({}, optionsData, { series: seriesData })
})
// 五盘区回风顺槽钻孔
let options4 = computed(() => {
	let seriesData = [
		{
			type: 'bar',
			barWidth: 15,
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 1,
						y: 1,
						x2: 0,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: '#1c82cf' // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#01326b' // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					},
					barBorderRadius: [90, 90, 0, 0]
				}
			},
			data: [8.0, 23.2, 25.6, 76.7, 135.6, 162.2]
		}
	]
	return merge({}, optionsData, { series: seriesData })
})
// 302回风钻孔
let options5 = computed(() => {
	let seriesData = [
		{
			type: 'bar',
			barWidth: 15,
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 1,
						y: 1,
						x2: 0,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: '#1c82cf' // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#01326b' // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					},
					barBorderRadius: [90, 90, 0, 0]
				}
			},
			data: [8.0, 23.2, 25.6, 76.7, 135.6, 162.2]
		}
	]
	return merge({}, optionsData, { series: seriesData })
})
// 306胶带顺槽钻孔
let options6 = computed(() => {
	let seriesData = [
		{
			type: 'bar',
			barWidth: 15,
			itemStyle: {
				normal: {
					color: {
						type: 'linear',
						x: 1,
						y: 1,
						x2: 0,
						y2: 0,
						colorStops: [
							{
								offset: 0,
								color: '#1c82cf' // 0% 处的颜色
							},
							{
								offset: 1,
								color: '#01326b' // 100% 处的颜色
							}
						],
						global: false // 缺省为 false
					},
					barBorderRadius: [90, 90, 0, 0]
				}
			},
			data: [8.0, 23.2, 25.6, 76.7, 135.6, 162.2]
		}
	]
	return merge({}, optionsData, { series: seriesData })
})
</script>
